<template>
	<view class='goodDetail'>
		<view class='pageTop'>
			<search></search>
		</view>
		<view class='progress'>
			<view @click="kindClick" open-type="switchTab" class='kindOne dFlex jStart_aCenter'>
				<text>{{goods_category.name1}}</text>
				<u-icon name="arrow-right" size='14px'></u-icon>
			</view>
			<view  open-type="switchTab" class='kindOne dFlex jStart_aCenter'>
				<text>{{goods_category.name2}}</text>
				<u-icon name="arrow-right" size='14px'></u-icon>
			</view>
			<navigator :url="'/pages/shopList?cid='+goods_category.id3" class='kindOne dFlex jStart_aCenter'>
				<text>{{goods_category.name3}}</text>
			</navigator>
		</view>
		<view class='container'>
			<view class='shop_name'>{{detail.goods_name}}</view>
			<view class='banner'>
			<!-- #ifdef H5 -->
				<view class="swiper-container" :style="slideheight">
				 <u-swiper
				  :list="banner"
				  :autoplay="slidestatuss"
				  :height="height"
				  ref="uSwiper"
				  indicator 
				  indicatorMode="line"
				  circular
				>
				  <template v-slot:default="{ item, index }">
					<view class="swiper-item" >
						<video
						  v-if="item.type === 'video'"
						  :src="item.url"
						  :autoplay="true"
						  :poster="item.poster"
						  controls
						></video>
					  <image v-else :src="item.url" mode="aspectFill" class="image" ></image>
					</view>
				  </template>
				</u-swiper>
				
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				    <iframe :src="slideurl"  scrolling="no" frameborder="0" :style="slideheight" style="width:100%;"></iframe>
				<!-- #endif -->
			</view>
			
			<view class='price'>
				<view class='newPrice'>SAR {{total_amount}} / {{detail.unit}}</view>
				<view class='oldPrice'>SAR {{detail.market_price}}</view>
			</view>
			<view style="padding:0 12px;font-size:28rpx;color:#666;">
				<view style="padding:10rpx 0;">{{$t('goodDetail.yunshuxiangqing')}}：{{detail.transport}}</view>
				<view style="padding:10rpx 0;">{{$t('goodDetail.tedian')}}：{{detail.feature}}</view>
			</view>
			<!-- 优惠券列表 -->
			<view class='coupon' v-if="coupon.length>0">
				<view class="quan dFlex jStart_aCenter" v-for="(item,index) in coupon" :key='index'>
					<view class='quanIcon imgPublic'>
						<image src="../static/images/coupon.png" mode="widthFix"></image>
					</view>
					<text>{{$t('car.extra_reduce')}} {{item.money}} SAR</text>
				</view>
			</view>
			<!-- 优势说明 -->
			<view class='advantage dFlex jAround_aCenter'>
				<view class="item">
					<view class='itemIcon imgPublic'>
						<image src="../static/images/high_rated_seller.png" mode="widthFix"></image>
					</view>
					<text>{{$t('goodDetail.advantage1')}}</text>
				</view>
				<view class="item">
					<view class='itemIcon imgPublic'>
						<image src="../static/images/cash_on_delivery.png" mode="widthFix"></image>
					</view>
					<text>{{$t('goodDetail.advantage2')}}</text>
				</view>
				<view class="item">
					<view class='itemIcon imgPublic'>
						<image src="../static/images/secure_transaction.png" mode="widthFix"></image>
					</view>
					<text>{{$t('goodDetail.advantage3')}}</text>
				</view>
			</view>
			<view class='shop_name' v-if="detail.price_ladder">{{$t('goodDetail.store_count')}} : {{store_count}}</view>
			<!-- 规格列表 -->
			<view class='specsList'>
				<view class='specItem' v-for="(item,index) in skuLists" :key='index'>
					<view class='spesc_item_title'>{{item.name}}:<text>{{item.spec_item[item.index].item}}</text></view>
					<view class='spesc_item_list'>
						<!-- 选中的规格加 active -->
						<view class='spesc_one' v-for="(sku,idx) in item.spec_item" @click="handleSku(index,idx)"
							:key='idx'>
							<view v-if="skuLists[index].index==idx" style="color: #666;background: #f8e801;padding: 5px 8px;">{{sku.item}}</view>
							<view v-else style="padding: 5px 8px;">{{sku.item}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class='shop_name' v-if="detail.price_ladder">{{$t('goodDetail.pifa')}}</view>
			<!-- 批发价格 -->
			<view class='specsList' style="margin-bottom: 20px;">
				<view class='specItem' v-for="(item,index) in detail.price_ladder" :key='index'>
					<view class='spesc_item_title'>{{item.amount}}~{{item.amount2}}<text style="margin-left: 20px;"> SAR {{item.price}}</text></view>
				</view>
			</view>
			
			<!-- 门店信息 -->
			<!-- <view class='store dFlex jStart_aStart'>
				<view class='storeImg imgPublic'>
					<image src="../static/logo.png" mode="widthFix"></image>
				</view>
				<view class='info'>
					<view class='storeName'>门店名称门店名称</view>
					<view class='intro'>文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</view>
				</view>
			</view> -->
			
			<view class='shopInfo'>
				<!-- <u-tabs :list="menus" lineWidth="80" :current='currentMenu' class='menus'
					itemStyle='width:50%;box-sizing:border-box;'></u-tabs> -->
				<view class='showContent'>
					<u-parse :content="detail.goods_content"></u-parse>
				</view>
			</view>
			<!-- 评分 -->
			<view class="rating">
				<view class='rateTitle'>{{$t('goodDetail.evaluation')}}</view>
				<view class='score'>{{comment_score.score}}</view>
				<view class='rate'>
					<u-rate :count="5" v-model="comment_score.score" size='50rpx' :readonly='true' activeColor='#f8e801'
						:allowHalf='true'></u-rate>
				</view>
				<view class="star">
					<view class='starLine dFlex jAround_aCenter'>
						<u-icon name="star-fill" label='5' labelPos='left' color='#f8e801' labelSize='13px'
							size='13px'></u-icon>
						<u-line-progress :percentage="comment_score.score_p5" :showText='false'
							activecolor="#f8e801"></u-line-progress>
						<text>{{comment_score.score_p5}}%</text>
					</view>
					<view class='starLine dFlex jAround_aCenter'>
						<u-icon name="star-fill" label='4' labelPos='left' color='#82ae04' labelSize='13px'
							size='13px'></u-icon>
						<u-line-progress :percentage="comment_score.score_p4" :showText='false'
							activeColor="#82ae04"></u-line-progress>
						<text>{{comment_score.score_p4}}%</text>
					</view>
					<view class='starLine dFlex jAround_aCenter'>
						<u-icon name="star-fill" label='3' labelPos='left' color='#f3ac30' labelSize='13px'
							size='13px'></u-icon>
						<u-line-progress :percentage="comment_score.score_p3" :showText='false'
							activeColor="#f3ac30"></u-line-progress>
						<text>{{comment_score.score_p3}}%</text>
					</view>
					<view class='starLine dFlex jAround_aCenter'>
						<u-icon name="star-fill" label='2' labelPos='left' color='#f36c32' labelSize='13px'
							size='13px'></u-icon>
						<u-line-progress :percentage="comment_score.score_p2" :showText='false'
							activeColor="#f36c32"></u-line-progress>
						<text>{{comment_score.score_p2}}%</text>
					</view>
					<view class='starLine dFlex jAround_aCenter'>
						<u-icon name="star-fill" label='1' labelPos='left' color='#f36c32' labelSize='13px'
							size='13px'></u-icon>
						<u-line-progress :percentage="comment_score.score_p1" :showText='false'
							activeColor="#f36c32"></u-line-progress>
						<text>{{comment_score.score_p1}}%</text>
					</view>
				</view>
			</view>
			<!-- 问题解答 -->
			<!-- <view class='questions'>
				<view class='line' v-for="(item,index) in 3" :key='index'>
					<view class='ques'>How do I review this product?</view>
					<view class='ans'>If you recently purchased this product from noon, you can go to your Orders page
						and click on the Submit Review button</view>
				</view>
			</view> -->
			<!-- 评论 -->
			<view class='comment' v-if="commentLists.length>0">
				<view class='title'>{{comment_count}} {{$t('goodDetail.comment')}}</view>
				<view class='commentList'>
					<view class='commentOne' v-for="(item,index) in commentLists">
						<!-- <u-avatar size='30' src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
							:text='暂无头像'></u-avatar> -->
						<view class='nickname'>{{item.username}}</view>
						<view class='date'>{{item.add_time}}</view>
						<u-rate :count="5" v-model="item.score" size='40rpx' :readonly='true' activeColor='#f8e801'
							:allowHalf='true'></u-rate>
						<view class='album' v-if="item.img&&item.img.length>0">
							<view class='imgOne imgPublic' v-for="(img,idx) in item.img" :key='idx'>
								<image :src="img" mode="widthFix"></image>
							</view>
						</view>
						<view class='desc'>{{item.content}}</view>
					</view>
				</view>
			</view>
			<!-- 图片说明 -->
			<!-- <view class='shopInfo'>图片说明</view> -->
		</view>
		<!-- 添加到购物车 -->
		<view class='getCar dFlex jStart_aCenter'>
			<view class='count' style="margin-right: 10px;width: 60px;">
				<!-- <picker mode='selector' @change='chooseCount' :range='countList'>
					<text>{{count}}</text>
				</picker> -->
				<u-input v-model="count" type ="number" inputAlign="center" ></u-input>
			</view>
			<u-button type="primary" @click="addCart" :text="$t('goodDetail.addCar')" style="color:#000;background-color: #f8e801;border:none;"></u-button>
			<view class="dot" v-if="car_count">
				{{car_count}}
			</view>
			<view class='btnOne dFlex jCenter_aCenter' @click="gocar" style="width:14%">
				<image src="../static/menu5_1.png" style="width:30px;height:30px"></image>
			</view>
		</view>
		<!-- 浮动按钮 -->
		<view class='floatBtns'style="top: 260px;">
			<view class='btnOne dFlex jCenter_aCenter' @click='addFavorite'>
				<u-icon name="../static/images/xinyuan1.png" v-if="detail.is_collect==1" size='28px'></u-icon>
				<u-icon name="../static/images/xinyuan.png" v-else size='28px'></u-icon>
			</view>
			
		</view>
		<view class='floatBtns' style="top: 320px;" >
			<view class='btnOne dFlex jCenter_aCenter' @click="goWeb">
				<u-icon name="../static/images/kefu.png"  size='28px'></u-icon>
			</view>
			
		</view>
		<!-- 心愿列表 -->
		<u-popup :show="wishDialog">
			<view class='wish'>
				<view class='title dFlex jBetween_aCenter '>
					<text>{{$t('goodDetail.wishlist')}}</text>
					<u-icon name="close" @click='wishDialog = CSSFontPaletteValuesRule' size="20"></u-icon>
				</view>
				<view class="wishList">
					<view class='wish_line dFlex jBetween_aCenter' v-for="(item,index) in wishList" :key='index'>
						<view class='line_title dFlex jStart_aCenter'>
							<view class='moren dFlex jCenter_aCenter'>{{$t('goodDetail.showDefault')}}</view>
							<text>名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称</text>
						</view>
						<view class='status dFlex jCenter_aCenter'>
							<u-icon name="checkmark" color="#f8e801" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class='btns dFlex jAround_aCenter'>
					<u-button :hairline='false' style="color:#409eff;border: none;"
						:text="$t('goodDetail.manage_wishlist')"></u-button>
					<u-button type="primary" color="#f8e801" :text="$t('goodDetail.save')"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 加入到购物车的弹窗 -->
		<u-popup :show="addCarDialog" mode="top">
			<view class='addCar'>
				<view class='carShop dFlex jBetween_aCenter' v-for="(item,index) in cartLists" :key="index">
					<view class='shopInfo dFlex jStart_aCenter'>
						<view class='shopImg imgPublic'>
							<image :src="item.image" mode="widthFix"></image>
						</view>
						<view class='shopName'>
							<view>{{item.goods_name}}</view>
							<view>{{$t('goodDetail.count')}}：{{item.goods_num}}</view>
						</view>
					</view>
					<view class='carInfo'>
						<text>{{$t('goodDetail.product_amount')}}</text>
						<view class='price'>SAR {{item.goods_price}}</view>
					</view>
				</view>
				<view class='btns dFlex jBetween_aCenter'>
					<u-button @click="settlement" type="primary" color="#f8e801" :text="$t('car.settle')"></u-button>
					<u-button :text="$t('goodDetail.continue_shop')" @click='addCarDialog = false'
						style="color:#f8e801;border-color:#f8e801;"></u-button>
				</view>
			</view>
		</u-popup>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<pageBottom></pageBottom>
		<!-- 登录弹窗 -->
		<u-popup :show="loginDialog" mode="center">
			<login @close="loginDialog=false"></login>
		</u-popup>
	</view>
</template>

<script>
	import login from '@/components/login.vue';
	import search from '@/components/search.vue';
	import pageBottom from '@/components/pageBottom.vue';
	export default {
		components: {
			login,
			search,
			pageBottom
		},
		data() {
			return {
				loginDialog: false,
				id: '',
				detail: {},
				goods_category: [],
				skuLists: [],
				banner: [],
				comment_score: {},
				coupon: [],
				page: 1,
				loadStatus: 'loadmore',
				commentLists: [],
				comment_count: 0,
				cartLists: [],
				total_amount: 0,
				sku_item: 0,
				height: '752.5rpx',
				scrollTop: 20,
				//商品介绍
				menus: [{
					name: this.$t('goodDetail.menu1')
				}, {
					name: this.$t('goodDetail.menu2')
				}],
				currentMenu: 0,
				// 显示添加到购物车的数量
				count: 1,
				countList: ["1", "2", "3"],
				// 心愿
				wishDialog: false,
				wishList: [1],
				// 添加到购物的弹窗
				addCarDialog: false,
				slidestatuss: false,
				kefu: '',
				slideurl:'',
				car_count:0,
				store_count:0,
				slideheight:{}
			};
		},
		onLoad(options) {
			this.id = options.id ?? ''
			this.init()
			this.getSku()
			this.getCommentLists()
			this.getCartLists()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('pages.goodDetail'),
			})
			this.getBannerHeight();
		},
		onPullDownRefresh() {
			this.init()
			this.getSku()
			this.getCommentLists()
			this.getCartLists()
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.getCommentLists()
		},
		methods: {
			async init() {
				const result = await this.$api('/goods/goodsInfo', {
					goods_id: this.id
				})
				this.detail = result.info
				this.car_count = result.car_count
				this.comment_score = result.comment_score
				this.coupon = result.coupon
				this.goods_category = result.goods_category
				this.kefu = result.kefu_url
				this.slideurl = result.slideurl
				// #ifdef H5
				this.banner = result.goods_imagess
				// #endif
				// #ifdef APP
				this.banner = result.slide_images
				this.slidestatuss=true;
				// #endif
				
				
			},
			async getSku() {
				const result = await this.$api('/goods/goodsSpecs', {
					goods_id: this.id
				})
				this.skuLists = result;
				this.getSkuInfo()
			},
			async getCommentLists() {
				const {
					dataLists,
					page,
					loadStatus,
					count
				} = await this.$tools.loadingFun('/goods/commentlist', {
					goods_id: this.id,
				}, this.commentLists, this.page, this.loadStatus);
				this.commentLists = dataLists;
				this.page = page;
				this.loadStatus = loadStatus;
				this.comment_count = count
			},
			async getCartLists() {
				const result = await this.$api('/cart/index')
				this.cartLists = result.cartList
			},
			handleSku(index, idx) {
				this.skuLists[index].index = idx
				this.getSkuInfo()
			},
			async getSkuInfo() {
				const skuLists = this.skuLists
				let item_id = []
				for (let i = 0; i < skuLists.length; i++) {
					item_id.push(skuLists[i].spec_item[skuLists[i].index].id)
				}
				const select_item = item_id.join('_')
				const result = await this.$api('/goods/goodsPrice', {
					ids: select_item
				})
				console.log('item', result)
				this.total_amount = result.price
				this.store_count=result.store_count
				this.sku_item = result.item_id
			},
			chooseCount(e) {
				this.count = this.countList[e.detail.value];
			},
			// 请求商品信息后 获取轮播图高度
			getBannerHeight() {
				const systemInfo = uni.getSystemInfoSync();
				const screenWidth = systemInfo.screenWidth; // 屏幕宽度（单位px）
				console.log(screenWidth);
				this.height = screenWidth+'px';
				this.slideheight = {
					height: this.height
				}
				/* uni.getImageInfo({
					src: this.banner[0],
					success: (info) => {
						let rate = info.width / info.height;
						console.log(rate);
						this.height = uni.getSystemInfoSync().windowWidth / rate+'px';
						this.slideheight = {
							height: this.height
						}
					}
				}) */
			},
			async addFavorite() {
				if (!this.$user.isLogin()) {
					this.loginDialog = true
					return
				}

				await this.$tools.addFavorite(this.detail)
				this.init()
			},
			addCart(item) {
				if (!this.$user.isLogin()) {
					this.loginDialog = true
					return
				}

				const _this = this;
				_this.$tools.addCart({
					goods_id: _this.id,
					item_id: _this.sku_item,
					goods_num: _this.count
				}).then(res => {
					this.init()
					/* _this.getCartLists().then(() => {
						_this.addCarDialog = true
					}) */
				})
			},
			settlement() {
				let cart = [];
				this.cartLists.forEach((item) => {
					cart.push(item.id)
				})
				const cart_ids = cart.join(',')

				uni.switchTab({
					url: './car'
				})
			},
			kindClick() {
				this.$cache.set('cid', this.goods_category.id1)
				uni.switchTab({
					url: '/pages/kind'
				})
			},
			goWeb() {
				// #ifdef H5
				window.open(this.kefu, "_blank");
				// #endif
				// #ifdef APP
				plus.runtime.openURL(this.kefu); 
				// #endif
				
			},
			gocar() {
				uni.switchTab({
					url: '/pages/car' 
				})
			}
		}
	}
</script>
 
<style lang="scss">

	.swiper-container {
	  width: 100%;
	  height: 380px; /* 根据需求调整高度 */
	  position: relative;
	  overflow: hidden;
	}
	.swiper-item {
	  width: 100%;
	  height: 100%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.dot {
		position: absolute;
		top: 0;
		right: 5px;
		width: 25px;
		height: 25px;
		font-size: 10px;
		background: red;
		border-radius: 50%;
		color: white;
		line-height: 25px;
		text-align: center;
	}
	.addCar {
		.btns {
			.u-button {
				width: 48%;
			}

			width: 100%;
			margin-top: 10px;
		}

		.shopInfo {
			.shopName {
				width: calc(100% - 48px);
			}

			.shopImg {
				width: 40px;
				height: 40px;
				overflow: hidden;
				margin-right: 8px;
			}

			flex: 1;
			padding:0;
		}

		.carInfo {
			.price {
				font-weight: bold;
				margin-top: 3px;
				white-space: nowrap;
			}

			text-align: center;
			width: max-content;
			margin-left: 12px;
		}

		width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}

	.wish {
		.btns {
			width: 100%;

			.u-button {
				width: 48%;
			}
		}

		.wishList {
			.wish_line {
				.line_title {
					text {
						display: inline-block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: calc(100% - 25px);
					}

					.moren {
						width: 20px;
						height: 20px;
						border-radius: 50%;
						background: $main;
						color: white;
						font-size: 10px;
						margin-right: 5px;
					}

					width: calc(100% - 25px);
					margin-right: 5px;
				}

				.status {
					width: 20px;
					height: 20px;
					border: 1px solid #999999;
					border-radius: 4px;
				}

				width: 100%;
				border: 1px solid rgba(0, 0, 0, 0.1);
				border-radius: 4px;
				padding: 12px;
				box-sizing: border-box;
				margin-bottom: 10px;
			}

			width: 100%;
			height: 48vh;
			overflow: auto;
			margin: 12px auto;
		}

		.title {
			width: 100%;
			font-weight: bold;
			font-size: 18px;
			padding-bottom: 10px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		}

		width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}

	.floatBtns {
		.btnOne {
			width: 30px;
			height: 30px;
			background: white;
			border-radius: 5px;
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
		}

		width:32px;
		height:32px;
		position: fixed;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
	}

	.shopInfo {
		width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}

	.comment {
		.commentList {
			.commentOne {
				.album {
					.imgOne {
						width: 40px;
						height: 40px;
						border-radius: 5px;
						overflow: hidden;
						display: inline-block;
						margin-right: 10px;
						margin-bottom: 5px;

						image {
							width: 100%;
						}
					}

					width: 100%;
					margin-top: 5px;
				}

				.date {
					font-size: 12px;
					color: #999999;
					margin-bottom: 5px;
				}

				.nickname {
					margin: 3px 0;
				}

				width: 100%;
				margin-bottom: 15px;
			}

			width: 100%;
			padding-top: 10px;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
		}

		.title {
			width: 100%;
			font-weight: bold;
			font-size: 16px;
			margin-bottom: 12px;
		}

		width: 100%;
		padding: 12px;
		background: white;
		box-sizing:border-box;
	}

	.questions {
		.line {
			.ans {
				font-size: 12px;
				line-height: 18px;
				color: #404553;
			}

			.ques {
				width: 100%;
				font-weight: bold;
				margin-bottom: 8px;
			}

			width: 100%;
			margin-bottom: 10px;
		}

		width: 100%;
		padding: 12px;
		box-sizing: border-box;
		background: white;
	}

	.rating {
		.star {
			.starLine {
				text {
					font-size: 12px;
				}

				.u-line-progress {
					margin: 0 5px;
				}

				width: 100%;
				padding: 2px 0;
			}

			width: 100%;
			margin-top: 8px;
		}

		.score {
			font-weight: bold;
			font-size: 18px;
		}

		.rateTitle {
			font-weight: bold;
			font-size: 16px;
			margin-bottom: 12px;
		}

		width: 100%;
		padding: 12px;
		box-sizing: border-box;
		background: white;
	}

	.getCar {
		.u-button {
			flex: 1;
		}

		.count {
			width: 38px;
			height: 38px;
			text-align: center;
			line-height: 38px;
		}

		width: 100%;
		position: fixed;
		bottom: 0px;
		left: 0;
		background:white;
		z-index: 1;
		padding: 13px 5px;
		box-sizing: border-box;
	}

	.container {
		padding-bottom: 200rpx;

		.shopInfo {
			.menus {
				::v-deep.u-tabs__wrapper__nav {
					width: 100%;
					height: 40px;
				}
			}

			.showContent {
				margin: 5px auto;

			}

			.u-tabs {
				margin: 0 auto;
			}

			width:100%;
			padding: 0 12px 12px;
			box-sizing: border-box;
		}

		.store {
			.info {
				.intro {
					font-size: 12px;
					color: #666666;
					margin-top: 5px;
				}

				flex:1;
			}

			.storeImg {
				width: 50px;
				height: 50px;
				margin-right: 10px;

				image {
					display: inline-block;
					width: 100%;
					height: 100%;
				}
			}

			width: 100%;
			padding: 12px;
			box-sizing: border-box;
		}

		.specsList {
			.specItem {
				.spesc_item_list {
					.spesc_one {
						width: max-content;
						display: inline-block;
						margin-right: 10px;
						border: 1px solid #999999;
						border-radius: 4px;
						
						font-size: 12px;
					}

					.active {
						border-color: $main;
						color: $main;
					}

					width: 100%;
					padding: 10px;
					box-sizing: border-box;
					white-space: nowrap;
					overflow: hidden;
					overflow-x: auto;
				}

				.spesc_item_title {
					width: 100%;
					padding: 10px;
					color: #7e859b;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);

					text {
						display: inline-block;
						color: #404533;
						padding-left: 5px;
						font-weight: bold;
					}
				}

				width: 95%;
				margin: 10px auto 0;
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
			}

			width: 100%;
		}

		.advantage {
			.item {
				.itemIcon {
					width: 42px;
					height: 42px;
					margin: 0 auto 5px;
				}

				width: calc((100% - 2px) / 3);
				text-align: center;
				font-size: 12px;
				color:#404533;
			}

			.item:nth-child(2) {
				border-left: 1px solid rgba(0, 0, 0, 0.1);
				border-right: 1px solid rgba(0, 0, 0, 0.1);
			}

			width: 95%;
			padding: 10px 0;
			margin: 12px auto;
			border-radius: 5px;
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
		}

		.coupon {
			.quan {
				.quanIcon {
					width: 10px;
					height: 10px;
					margin-right: 10px;
					display: inline-block;
				}

				background:rgba(56, 174, 4, 0.05);
				width:max-content;
				border: 1px dashed #38ae04;
				font-size:12px;
				border-radius: 5px;
				padding:4px 8px;
				color:#38ae04;
				box-sizing: border-box;
				display: inline-block;
				margin-right: 10px;
			}

			width:100%;
			white-space: nowrap;
			padding: 12px;
			box-sizing: border-box;
			overflow: hidden;
			overflow-x: auto;
		}

		.price {
			.oldPrice {
				font-size: 12px;
				color: #999999;
				text-decoration: line-through;
			}

			.newPrice {
				font-size: 16px;
				margin-bottom: 5px;
				font-weight: bold;
			}

			width:100%;
			padding: 12px;
			background: white;
			box-sizing: border-box;
		}

		.banner {
			.score {
				text {
					font-size: 12px;
					display: inline-block;
					padding-left: 5px;
					margin-left: 5px;
					border-left: 1px solid #999999;
					color: #999999;
				}

				min-width:50px;
				border-radius: 50px;
				background: white;
				padding: 4px 5px;
				position: absolute;
				bottom:12px;
				right:12px;
				font-size: 13px;
			}

			position: relative;
		}

		.shop_name {
			width: 100%;
			padding: 12px;
			box-sizing: border-box;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 5px;
		}

		width: 100%;
		position: relative;
		background:white;
		margin-bottom: 12px;
	}

	.goodDetail {
		.progress {
			width: 100%;
			background: white;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			padding: 10px;
			box-sizing: border-box;
			overflow: hidden;
			overflow-x: auto;
			white-space: nowrap;
			margin-bottom: 10px;

			.kindOne {
				display: inline-block;
				color: #666666;

				.u-icon {
					width: fit-content;
					display: inline-block;
					vertical-align: middle;
				}
			}
		}

		.pageTop {
			background: white;
		}
		
	}
	
</style>